<template>
<view class="comp-service-center">
    <view class="block-base block-base-service">
        <view class="block-header">
            <view class="block-title">自助预约</view>
            <view @click="goProgress" class="btn-menu"> 进度查询 <uni-icons color="var(--text-normal-color--);" type="right" size="12"></uni-icons>
            </view>
        </view>
        <view class="reservation-list" >
			<view class="reservation-box" v-for="item in mainServiceList">
				<image class="reservation-item"  :src="item.bgImage" @click="afterSales(item.path)"></image>
				<view @click="afterSales(item.path)" style="font-weight: bold;font-size: 20rpx;">
					{{item.name}}
				</view>
			</view>
        </view>
    </view>
    <view class="block-base block-self-search">
        <view class="block-header">
            <view class="block-title">自助查询</view>
        </view>
        <view class="ser-list">
            <view class="service-item" @click="autoSelect(item.path)" v-for="item in serList">
                <image class="service-icon" :src="item.bgImage"></image>
                <view class="service-name">{{item.name}}</view>
            </view>
        </view>
    </view>
	<view class="block-base">
	    <view class="block-header">
	        <view class="block-title">联系我们</view>
	    </view>
	<!-- 	<view class="bolock-contact" style="border-bottom: 1px solid gainsboro;">
			<view><uni-icons class="bolock-icons" color="blue" type="headphones" size="24"></uni-icons>在线客服</view>
			<view class="bolock-contact-font">8:30至23:00</view>
		</view> -->
		<view class="bolock-contact" @click="isCustomerShow">
			<view><uni-icons class="bolock-icons" color="blue" type="phone" size="24"></uni-icons>服务热线</view>
			<view class="bolock-contact-font">7x24小时</view>
		</view>
	</view>
	<customerService :customerShow="customerShow" @child-customer="isCustomer"></customerService>
</view>
</template>

<script>
	import customerService from '../../../components/customer-service/customer-service.vue';
	export default {
		components:{customerService},
		data() {
			return {
				customerShow:false,
				mainServiceList:[
					{
						bgImage:"@/static/imager/index/index-install.png",
						name:"安装",
						code: 'install',
						path:"/pages/index/afterSales/afterSales?code=install&name=安装"
					},
					{
						bgImage:"@/static/imager/index/index-maintenance.png",
						name:"维修",
						code: 'maintain',
						path:"/pages/index/afterSales/afterSales?code=maintain&name=维修"
					},
					{
						bgImage:"@/static/imager/index/index-remove.png",
						name:"换机",
						code: 'moveMachine',
						path:"/pages/index/afterSales/afterSales?code=moveMachine&name=换机"
					}
				],
				serList:[
					{
						bgImage:"@/static/imager/index/index-charge.png",
						name:"收费标准",
						path:"/pages/index/autoSelect/standard/standard"
					},
					{
						bgImage:"@/static/imager/index/index-warranty.png",
						name:"包修政策",
						path:"/pages/index/autoSelect/policy/policy"
					},
					{
						bgImage:"@/static/imager/index/index-instructions.png",
						name:"说明书",
						path:"/pages/index/autoSelect/instructions/instructions"
					},
					{
						bgImage:"@/static/imager/index/index-service.png",
						name:"服务标准",
						path:"/pages/index/autoSelect/service/service"
					},
					{
						bgImage:"@/static/imager/index/index-fault.png",
						name:"故障自查",
						path:"/pages/index/autoSelect/fault/fault"
					},
					{
						bgImage:"@/static/imager/index/index-video.png",
						name:"家电视频",
						path:"/pages/index/autoSelect/video/video"
					}
				]
			}
		},
		methods: {
			isCustomerShow(){
				this.customerShow=true;
			},
			isCustomer(){
				this.customerShow=false;
			},
			afterSales(path) {
				uni.navigateTo({
					url: path
				});
			},
			autoSelect(path){
				uni.navigateTo({
					url: path
				});
			},
			goProgress(){
				uni.navigateTo({
					url: "/pages/user/progress-query/progress-query"
				});
			}
		}
	}  
</script>

<style>
	.reservation-item{
		width: 100rpx;
		height: 100rpx;
	}
	.reservation-list{
		padding-top: 10rpx;
		display: flex;
		justify-content: space-around;
	}
	.reservation-box{
		text-align: center;
	}
	.bolock-contact{
		display: flex;
		justify-content: space-between;
		padding: 35rpx 24rpx 35rpx 24rpx;
		align-items: center;
		display: -webkit-flex;
		position: relative;
		height: 50rpx;
		line-height: 50rpx;
	}
	.bolock-icons{
		margin-right: 10rpx;
		line-height: 50rpx;
	}
	.bolock-contact-font{
		color: #bec0c4;
		font-size: 24rpx;
	}
	.block-base-service{
		padding-bottom: 28rpx;
	}
	.comp-service-center {
	  --text-main-color--: #1a1a1a;
	  --text-second-color--: #bec0c4;
	  --text-normal-color--: #8c9198;
	  position: relative;
	}
	.block-base {
	  background: hsla(0, 0%, 100%, 0.98);
	  border-radius: 16rpx;
	  margin: 24rpx;
	}
	.block-base .block-header {
	  align-items: center;
	  display: -webkit-flex;
	  display: flex;
	  justify-content: space-between;
	  padding: 24rpx 16rpx 0rpx 24rpx;
	  position: relative;
	}
	.block-base .block-title {
	  color: var(--text-main-color--);
	  flex: 1;
	  font-family:
	    PingFangSC-Semibold,
	    PingFang SC,
	    sans-serif;
	  font-size: 32rpx;
	  font-weight: 600;
	  line-height: 48rpx;
	}
	.block-base .btn-menu image {
	  display: block !important;
	  height: 32rpx !important;
	  width: 32rpx !important;
	}
	.block-base .btn-menu {
	  align-items: center;
	  color: var(--text-normal-color--);
	  display: -webkit-flex;
	  display: flex;
	  font-family:
	    PingFangSC-Regular,
	    PingFang SC,
	    sans-serif;
	  font-size: 24rpx;
	  font-weight: 400;
	  height: 36rpx;
	  line-height: 40rpx;
	}
	.comp-service-center .main-list {
	  display: -webkit-flex;
	  display: flex;
	  justify-content: space-between;
	  padding: 10rpx 24rpx 0;
	}
	.comp-service-center .main-item {
	  background-position: bottom;
	  background-repeat: no-repeat;
	  background-size: 100% 150rpx;
	  box-sizing: border-box;
	  height: 150rpx;
	  position: relative;
	  width: calc((100% - 32rpx) / 3);
	}
	.comp-service-center .ser-list {
	  display: -webkit-flex;
	  display: flex;
	  flex-wrap: wrap;
	  padding: 16rpx 0;
	}
	.comp-service-center .ser-list .service-item {
	  padding: 16rpx 0;
	  width: 33.33%;
	}
	.comp-service-center .ser-list .service-icon {
	  display: block !important;
	  height: 50rpx !important;
	  margin: 0 auto !important;
	  width: 50rpx !important;
	}
	.comp-service-center .ser-list .service-name {
	  color: var(--text-main-color--);
	  font-family:
	    PingFangSC-Regular,
	    PingFang SC,
	    sans-serif;
	  font-size: 24rpx;
	  font-weight: 400;
	  line-height: 36rpx;
	  padding-top: 8rpx;
	  text-align: center;
	}
	.comp-service-center .add-value-list {
	  display: -webkit-flex;
	  display: flex;
	  flex-wrap: wrap;
	  padding: 16rpx 24rpx;
	}
	.comp-service-center .add-value-item-wrapper {
	  border-radius: 20rpx;
	  margin: 8rpx 0;
	  width: calc((100% - 16rpx) / 2);
	}
	.comp-service-center .add-value-item-wrapper:nth-child(odd) {
	  margin-right: 16rpx;
	}
	.comp-service-center .add-value-item {
	  background-position: bottom 0 right 0;
	  background-repeat: no-repeat;
	  background-size: 172rpx 172rpx;
	  box-sizing: border-box;
	  padding: 20rpx 0 0 24rpx;
	}
	.comp-service-center .add-value-item .item-name {
	  color: var(--text-main-color--);
	  font-family:
	    PingFangSC-Semibold,
	    PingFang SC,
	    sans-serif;
	  font-size: 28rpx;
	  font-weight: 600;
	  line-height: 44rpx;
	}
	.comp-service-center .add-value-item .item-desc {
	  color: var(--text-second-color--);
	  font-family:
	    PingFangSC-Regular,
	    PingFang SC,
	    sans-serif;
	  font-size: 20rpx;
	  font-weight: 400;
	  line-height: 32rpx;
	}
	.comp-service-center .add-value-item .btn {
	  color: var(--text-main-color--);
	  font-family:
	    PingFangSC-Regular,
	    PingFang SC,
	    sans-serif;
	  font-size: 10px;
	  font-weight: 400;
	  line-height: 32rpx;
	  padding: 42rpx 0 24rpx;
	}
	.comp-service-center .add-value-item .item-name .item-icon {
	  height: 40rpx;
	  width: 40rpx;
	}


</style>
